<template>
  <section class="box">
    <h3>所有列表</h3>
    <ol>
      <li v-for="item in store.state.list" :key="item.id">{{ item.name }}</li>
    </ol>
    <h3>女生列表</h3>
    <ol>
      <li v-for="item in store.getters.girlList" :key="item.id">{{ item.name }}</li>
    </ol>
    <h3>成年女生列表</h3>
    <ol>
      <li v-for="item in store.getters.adultGirlList" :key="item.id">{{ item.name }}</li>
    </ol>
    <h3>年龄列表</h3>
    <input type="number" v-model="age">
    <ol>
      <li v-for="item in store.getters.getListAsAge(age)" :key="item.id">{{ item.name }}</li>
    </ol>
  </section>
</template>

<script lang="ts" setup>
  import {ref} from "vue";
  import {useStore} from "vuex";
  const store = useStore();
  const age = ref();
</script>

<style scoped>
.box {
  border: 1px solid #000;
  padding: 0px 10px;
}
</style>